<example name="Icon">
  <file type="html">
    <div id="some-icons">
      <span id="icon-container"></span>
      <span id="icon-search"></span>
      <span id="icon-16-pencil"></span>
      <span id="icon-14-pencil"></span>
      <span id="icon-custom-permission"></span>
    </div>
  </file>

  <file type="css">
    :global(.ring-icon) {
      margin: 8px;
      padding: 8px;
    }
  </file>

  <file type="js">
    import React from 'react';
    import {render} from 'react-dom';
    import Icon from '@jetbrains/ring-ui/components/icon/icon';
    import searchIcon from '@jetbrains/icons/search.svg';
    import checkMarkIcon from '@jetbrains/icons/checkmark.svg';
    import pencilIcon from '@jetbrains/icons/pencil.svg';
    import permissionIcon from '@jetbrains/icons/permission.svg';

    render(<Icon
      className="additional-class"
      color="orange"
      glyph={checkMarkIcon}
      size={Icon.Size.Size32}
    />, document.getElementById('icon-container'));

    render(<Icon
      glyph={searchIcon}
      size={Icon.Size.Size32}
    />, document.getElementById('icon-search'));

    render(<Icon
      glyph={pencilIcon}
      size={Icon.Size.Size16}
    />, document.getElementById('icon-16-pencil'));

    render(<Icon
      glyph={pencilIcon}
      size={Icon.Size.Size14}
    />, document.getElementById('icon-14-pencil'));

    render(<Icon
      glyph={permissionIcon}
      height={80}
      width={100}
    />, document.getElementById('icon-custom-permission'));
  </file>
</example>

<example name="Icons list">
  <file type="html">
    <h3>All available icons are listed below. Place the cursor over an icon to
      see its name.</h3>
    <div id="all-icons"></div>
  </file>

  <file type="css">
    @value unit, link-color from '../global/global.css';

    :global(.icon-example__container) {
      margin-left: calc(0 - calc(unit * 2));
    }

    :global(.ring-icon) {
      margin: 8px;
      padding: 8px;
      color: link-color;
    }
  </file>

  <file type="js">
    import React from 'react';
    import {render} from 'react-dom';
    import {createElement} from 'react';
    import Icon from '@jetbrains/ring-ui/components/icon/icon';

    const icons = require.context('@jetbrains/icons', false, /\.svg$/);

    render(createElement('div', {
      className: 'icon-example__container',
      children: icons.keys().map(icons).map(function (icon) {
        return <Icon
          glyph={icon}
          title={icon}
        />;
      })
    }), document.getElementById('all-icons'));
  </file>
</example>

<example name="List of JetBrains product logos">
  <file type="html" disable-auto-size>
    <div id="logos"></div>
  </file>

  <file type="css">
    :global(.ring-icon) {
      color: black;
      margin: 8px;
      padding: 8px;
    }
  </file>

  <file type="js">
    import React from 'react';
    import {render} from 'react-dom';
    import {createElement} from 'react';
    import Icon from '@jetbrains/ring-ui/components/icon/icon';

    var logos = require.context('@jetbrains/logos', true, /\.svg$/);

    render(createElement('div', {
      children: logos.keys().map(logos).map(function (icon) {
        return <Icon
          glyph={icon}
          title={icon}
          size={Icon.Size.Size128}
        />;
      })
    }), document.getElementById('logos'));
  </file>
</example>
